<template>
  <div class="container">
    <div class="list" v-for="(item, index) in dataList" :key="index">
      <foldText :showContent="item.text"></foldText>
    </div>
  </div>
</template>

<script>
import foldText from './foldText';
export default {
  data() {
    return {
      dataList: [
        {
          text: `这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字`
        },
        {
          text:
            '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
        },
        {
          text: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
        },
        {
          text:
            '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
        },
        {
          text:
            'a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig '
        },
        {
          text:
            'a little pig a little pig a little piga little piga little piga little piga little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig '
        }
      ]
    };
  },
  components: { foldText },
  created() {},
  methods: {}
};
</script>

<style scoped>
.container {
  padding: 40px;
}
.list {
  width: 500px;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: left;
  margin-bottom: 20px;
  padding: 8px;
}
</style>
